<template>
  <!--k线-->
  <div class="k_content" id="kline_kline" style="width: 100%;height: 100%;">
    <div id="main_kline"><div style="color: #fff;">数据正在加载 请稍后...</div></div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import echarts from 'echarts';
import kline from '../kline/kline.js';
import data from '../kline/tmpdata.js';
import moment from 'moment'
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示行情 */,
    ticket: state => state.trade.ticket /*,, 推送数据 */,
    navtopheight: state => state.navtopheight /* 分隔面板高度 */,
    timelist: state => state.klinetime /* 时间选择器 */,
    klinetab: state => state.klinetab
  }),
  data() {
    return {
      time: 1,
      klineInterval: null,
      isright: false,
      klineData: [],
      mychartkline: null
    };
  },
  beforeDestroy() {
    if (this.klineInterval) {
      clearInterval(this.klineInterval);
    }
    this.klineInterval = null;
  },
  watch: {
    klinetab:function (val) {
      if (val == '1d') {
        val = 'd'
      } else if (val == '1w') {
        val = 'w'
      } else if (val == 'mounth') {
        val = 'm'
      }
      this.init(val.toLocaleUpperCase());
    },
    timelist(val) {
      this.init(val);
    },
    ticket:{
　　　　handler: function(val){
        // 时间 开盘 收盘 最低 最高 成交量
        let currentItem = val.find( item => { 
          return  item.M + item.S + item.C == this.select
        })
        let newData = []
        newData[0] = moment.unix(currentItem.Tick).format('HH:mm')
        newData[1] = currentItem.O
        newData[2] = currentItem.P
        newData[3] = currentItem.L
        newData[4] = currentItem.H
        newData[5] = currentItem.V
        if (this.klineData.length > 0) {
          let newArr = [...this.klineData] 
          newArr[newArr.length - 1] = newData
          this.klineData = newArr
          this.mychartkline && this.mychartkline.setOption(kline.initKOption(this.klineData));
        }
　　　　},
      immediate: true,
　　　 deep:true
　　},
    select:{
　　　　handler: function(val){
        this.$nextTick( () => {
            let mychartkline = document.getElementById('main_kline');
            mychartkline.style.width = $('#kline_kline').width() + 'px';
            mychartkline.style.height = $('#kline_kline').height() + 'px';
            this.mychartkline = echarts.init(mychartkline);
            this.init('1M');
          })
　　　　},
      immediate: true,
　　　　deep:true
　　},
    /* 分隔面板高度*/
    navtopheight(val) {
      let mychartkline = document.getElementById('main_kline');
      mychartkline.style.width = $('#kline_kline').width() + 'px';
      mychartkline.style.height = $('#kline_kline').height() + 'px';
      this.mychartkline = echarts.init(mychartkline);
      this.mychartkline.resize();
    }
  },
  mounted() {
    // let mychartkline = document.getElementById('main_kline');
    // mychartkline.style.width = $('#kline_kline').width() + 'px';
    // mychartkline.style.height = $('#kline_kline').height() + 'px';
    // this.mychartkline = echarts.init(mychartkline);
    // this.init('6000');
  },
  components: {},
  methods: {
    init(range) {
      var that = this;
      clearInterval(that.klineInterval);
      that.klineInterval = null;
      this.rkline(this.select, range);
      that.klineInterval = setInterval(res => {
        // 进行实时渲染
        that.rkline(this.select, range);
      }, 60000);
    },
    // 从数组中寻找对应code的数据进行渲染
    // TODO实时动态渲染
    rkline(symbol, time) {
      this.$post('kvc/socketlist', {
        symbol: symbol,
        period: time,
        pidx: 1,
        psize: 300,
        withlast: 1
      }).then(res => {
        let data = JSON.parse(res.data)
        if (data.Code == 0) {
          let arr = data.Obj.split(';')
          arr = arr.map( item => {
            let datas = item.split(',')
            // 时间 开盘 收盘 最低 最高 成交量
            let tick = datas[0]
            let time1 = moment.unix(tick).format('HH:mm') // 时间
            let ds = []
            ds.push(time1)
            ds.push(parseFloat(datas[2])); // 开盘价
            ds.push(parseFloat(datas[1])); // 收盘价
            ds.push(parseFloat(datas[4]));
            ds.push(parseFloat(datas[3]));
            ds.push(parseFloat(datas[6]));
            return ds
          })
          this.klineData = arr
          this.mychartkline.setOption(kline.initKOption(this.klineData));
        } else {
          if (this.klineInterval) {
            clearInterval(this.klineInterval);
          }
          this.klineInterval = null;
          // this.mychartkline.setOption(kline.initKOption(data.knedata0));
        }
      });
    }
  }
};
</script>

<style scoped></style>
